//
//  HomeView.swift
//  Test
//
//  Created by ming on 2024/8/31.
//

import SwiftUI

struct HomeView: View {
    // You'll need to fetch and decode your JSON data into this model
    // For this example, we'll use a placeholder model.
    @StateObject private var vModel = HomeVModel()
    
    var body: some View {
        NavigationView {
            ScrollView {
                VStack(spacing: 16) {
                    // Header Section
                    headerSection
                        .padding(.top)

                    // Loan Disbursment Records Section
                    loanRecordsSection

                    // Safety Protection Section
                    safetyProtectionSection
                }
                .padding(.horizontal)
            }
            .background(Color(.systemGray6))
            .navigationBarHidden(true)
        }
    }

    // MARK: - View Components

    private var headerSection: some View {
        VStack(spacing: 20) {
            // Main Card
            VStack(alignment: .leading, spacing: 10) {
                HStack {
                    VStack(alignment: .leading) {
                        Text("Dana Solusi")
                            .font(.system(size: 20, weight: .bold))
                            .foregroundColor(.white)

                        Text("Matching Diverse needs")
                            .font(.system(size: 24, weight: .heavy))
                            .foregroundColor(.white)

                        Text("Compliance and transparency:")
                            .font(.system(size: 14))
                            .foregroundColor(.white.opacity(0.8))
                    }
                    Spacer()
                    // Loan cycle image (placeholder)
                    Image("loan_cycle_image")
                        .resizable()
                        .scaledToFit()
                        .frame(width: 100)
                }

                // Loan details
                HStack(spacing: 10) {
                    Text("0.06%/day")
                        .font(.system(size: 16, weight: .bold))
                        .foregroundColor(.green)
                        .padding(.vertical, 4)
                        .padding(.horizontal, 8)
                        .background(Color.white)
                        .cornerRadius(8)

                    Spacer()

                    Text("Loan cycle")
                        .font(.system(size: 14))
                        .foregroundColor(.white)

                    Text("180days")
                        .font(.system(size: 16, weight: .bold))
                        .foregroundColor(.green)
                }

                // Credit Limit
                VStack(alignment: .leading) {
                    Text("Maximum loan credit limit")
                        .font(.system(size: 14))
                        .foregroundColor(.white)
                    Text("9,900,000")
                        .font(.system(size: 40, weight: .bold))
                        .foregroundColor(.white)
                }

                // View Details Button
                Button(action: {
                    // Handle View details action
                }) {
                    Text("View details")
                        .font(.system(size: 18, weight: .bold))
                        .foregroundColor(.white)
                        .frame(maxWidth: .infinity)
                        .padding()
                        .background(Color(red: 255/255, green: 191/255, blue: 0))
                        .cornerRadius(12)
                }

                // Loan process steps
                HStack(spacing: 20) {
                    processStep(imageName: "upload_icon", title: "Upload\nInformation")
                    processStep(imageName: "auth_icon", title: "Authenti\nCation")
                    processStep(imageName: "get_quota_icon", title: "Get\nQuota")
                }
                .padding(.top, 10)
            }
            .padding()
            .background(Color(red: 45/255, green: 45/255, blue: 45/255))
            .cornerRadius(20)
        }
    }

    private func processStep(imageName: String, title: String) -> some View {
        VStack {
            Image(imageName)
                .resizable()
                .scaledToFit()
                .frame(width: 40, height: 40)
            Text(title)
                .font(.system(size: 12))
                .foregroundColor(.white)
                .multilineTextAlignment(.center)
        }
    }

    private var loanRecordsSection: some View {
        VStack(alignment: .leading, spacing: 10) {
            Text("Loan disbursement records")
                .font(.system(size: 18, weight: .bold))
                .foregroundColor(.black)
            
            // This is where you'd use the `homoienne` data from your JSON
            HStack {
                Image(systemName: "checkmark.circle.fill")
                    .foregroundColor(.green)
                Text("Congratulations to Zhang** for successfully obtaining a loan of 4,800,000")
                    .font(.system(size: 14))
                    .foregroundColor(.black)
                Spacer()
            }
            .padding()
            .background(Color.white)
            .cornerRadius(12)
        }
    }

    private var safetyProtectionSection: some View {
        VStack(alignment: .leading, spacing: 10) {
            Text("Loan disbursement records") // Same as above, based on image
                .font(.system(size: 18, weight: .bold))
                .foregroundColor(.black)
            
            HStack(spacing: 20) {
                VStack(alignment: .leading) {
                    Text("Safety protection")
                        .font(.system(size: 18, weight: .bold))
                        .foregroundColor(.black)
                    Text("Protecting information rights")
                        .font(.system(size: 14))
                        .foregroundColor(.gray)
                    Button(action: {
                        // Handle apply now action
                    }) {
                        Text("Apply Now")
                            .font(.system(size: 14, weight: .bold))
                            .foregroundColor(.white)
                            .padding(.horizontal, 12)
                            .padding(.vertical, 8)
                            .background(Color.blue)
                            .cornerRadius(8)
                    }
                }
                Spacer()
                Image("safety_image") // Placeholder for the safety image
                    .resizable()
                    .scaledToFit()
                    .frame(width: 100)
            }
            .padding()
            .background(Color.white)
            .cornerRadius(12)
        }
    }
}

#Preview {
    HomeView()
}
